<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网站首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./js/swiper.min.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery.js"></script>
		<script src="js/swiper.min.js"></script>
	</head>
	<body>
		<nav class="navbar w">
			<div class="logo">
				<h1>雪天网页响应式</h1>
			</div>
			<ul>
				<li><a href="index.html">网站首页</a></li>
				<li><a href="#">网页响应式</a></li>
				<li><a href="#">搜索</a></li>
				<li><a href="#">媒体查询</a></li>
			</ul>
			<!-- 手机端 -->
			<div class="hbg">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
		</nav>


		<div class="banner">
			<div class="swiper mySwiper swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="./img/img.webp" alt="">
					</div>
					<div class="swiper-slide">
						<img src="./img/img.webp" alt="">
					</div>
					<div class="swiper-slide">
						<img src="./img/img.webp" alt="">
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-pagination"></div>
			</div>
		</div>


		<div class="index-list">
			<div class="w">
				<h3 class="title">网站响应式</h3>
				<div class="list-box">
					<div class="l-item">
						<a href="detail.html">
							<img src="./img/img.webp" alt="">
							<h3>这是标题</h3>
							<p>
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
							</p>
						</a>
					</div>
					<div class="l-item">
						<a href="detail.html">
							<img src="./img/img.webp" alt="">
							<h3>这是标题</h3>
							<p>
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
							</p>
						</a>
					</div>
					<div class="l-item">
						<a href="detail.html">
							<img src="./img/img.webp" alt="">
							<h3>这是标题</h3>
							<p>
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
							</p>
						</a>
					</div>
					<div class="l-item">
						<a href="detail.html">
							<img src="./img/img.webp" alt="">
							<h3>这是标题</h3>
							<p>
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
								这是描述这是描述这是描述这是描述这是描述
							</p>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="two">
			<div class="w">
				<h3 class="title">媒体查询</h3>
				<div class="two-list">
					<img src="./img/img.webp" alt="">
					<img src="./img/img.webp" alt="">
				</div>
			</div>
		</div>



		<footer>
			网站响应式
		</footer>
	</body>
</html>

<script>
	// 轮播图
	var swiper = new Swiper(".mySwiper", {
		autoplay: true,
		pagination: {
			el: ".swiper-pagination",
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
	});
	
	
	// 导航栏
	var flag = false;
	$('.hbg').click(function(){
		flag = !flag;
		if(flag){
			$('.line:nth-child(2)').hide()
			$('.line:nth-child(1)').css({
				'transform': 'translateY(5px) rotate(225deg)'
			})
			$('.line:nth-child(3)').css({
				'transform': 'translateY(-3px) rotate(-225deg)'
			})
		}else{
			$('.line:nth-child(2)').show()
			$('.line:nth-child(1)').css({
				'transform': 'translateY(0) rotate(0)'
			})
			$('.line:nth-child(3)').css({
				'transform': 'translateY(0) rotate(0)'
			})
		}
		
		$('.navbar ul').stop().slideToggle();
	})
</script>